<template>
	<view class="detail-box" @click="handleToClick(id,lastReadChapter)">
		<u-image width="150rpx" height="200rpx" border-radius="12" :src="image" mode="cover" :fade="true" duration="450">
			<u-loading slot="loading"></u-loading>
		</u-image>
		<view class="detail-info">
			<view class="detail-top">
				<view class="detail-title">
					<view class="name u-line-1">{{name}}</view>
					<view class="writer u-line-1">{{writer}}</view>
				</view>
				<view class="detail-tag">
					<view class="">
						<u-tag v-if="is_over" :text="is_over" mode="light" :closeable="false" bg-color="#F9F5FF" color="#BD8DFF"
						 border-color="#DCC3FF" />
						<u-tag v-if="type" :text="type" mode="light" :closeable="false" bg-color="#FFF7F7" color="#FF8F8F" border-color="#FFCCCC" />
					</view>
					<view class="add-button" v-if="lastReadChapterName">
						<u-button size="mini" hover-class="none" :ripple="true" @click="handleAddBookShelf(id)" plain :type="addFlag?'error':'success'"
						 style="margin-right: 10rpx;">{{addFlag ? '撤出书架':'加入书架'}}</u-button>
						<u-button size="mini" hover-class="none" :ripple="true" @click="handleDeleteHistory(id)" plain type="primary">
							<u-icon name="trash" color="#2979ff" size="28"></u-icon>
						</u-button>
					</view>
				</view>
			</view>
			<view class="detail-intro u-line-2" v-if="intro">{{intro}}</view>
			<view v-if="timestamp!=0">{{$u.timeFrom(timestamp, 'yyyy年mm月dd日')}}读过</view>
			<view class="detail-last u-line-1" v-if="lastReadChapterName"><text>上次读到:</text><text>{{lastReadChapterName}}</text></view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getBookShelfList,
		addBookToShelf,
		delBookFromShelf
	} from '../api/shelf'
	export default {
		name: "DetailCard",
		data() {
			return {
				addFlag: false,
				bookShelfId:0
			};
		},
		props: {
			name: String,
			writer: String,
			is_over: String,
			type: String,
			intro: String,
			id: [Number, String],
			image: {
				default: 'http://foglake.sanye666.top/images/default-covor.jpg',
				type: String
			},
			lastReadChapter: {
				default: 0,
				type: [Number, String]
			},
			lastReadChapterName: String,
			timestamp: {
				type: [String, Number],
				default: 0
			}
		},
		mounted() {
			if (this.lastReadChapter !== 0) {
				this.handleGetBookShelf(this.id);
			}
		},
		methods: {
			handleToClick(id, lastReadChapter) {
				if (lastReadChapter === 0) {
					uni.navigateTo({
						url: `/pages/detail/detail?id=${id}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/read/read?id=${id}&chapter_id=${lastReadChapter}`
					})
				}
			},
			handleDeleteHistory(id) {
				this.$emit('hanleDeleteThis', id)
			},
			handleGetBookShelf(id) {
				if (this.access_token) {
					let header = {
						Authorization: 'Bearer ' + this.access_token
					}
					getBookShelfList(header).then(res => {
						let bookshelfList = [];
						if (res.code == 200) {
							bookshelfList = res.data.bookList;
						}
						bookshelfList.forEach(item => {
							if (item.book_id == id) {
								this.addFlag = true;
								this.bookShelfId = item.book_shelf_id;
							}
						})
					})
				} else {
					try {
						let bookShelf = uni.getStorageSync("bookShelf");
						if (bookShelf) {
							let _bookShelf = JSON.parse(bookShelf);
							if (_bookShelf[id]) {
								this.addFlag = true;
							}
						}
					} catch (e) {
						console.log(e);
					}
				}
			},
			// 加入or撤出书架
			handleAddBookShelf(id) {
				if (this.access_token) {
					if (this.addFlag) { // 撤出
						delBookFromShelf({
							Authorization: 'Bearer ' + this.access_token
						}, {
							'bookShelfId': this.bookShelfId
						}).then(res => {
							this.addFlag = false;
							this.$refs.uToast.show({
								title: '成功撤出书架',
								type: 'success',
								position: 'top'
							})
						})
					} else { // 加入
						addBookToShelf({
							Authorization: 'Bearer ' + this.access_token
						}, {
							'bookId': this.id,
							'lastReadChapter': 0,
							'index': 0
						}).then(res => {
							this.flag = true;
							this.$refs.uToast.show({
								title: '成功加入书架',
								type: 'success',
								position: 'top'
							})
						})
					}
				} else {
					if (this.addFlag) {
						let bookShelf = uni.getStorageSync("bookShelf");
						if (bookShelf) {
							let _bookShelf = JSON.parse(bookShelf);
							if (_bookShelf[id]) {
								delete _bookShelf[id];
								uni.setStorageSync("bookShelf", JSON.stringify(_bookShelf));
								this.addFlag = false;
								this.$refs.uToast.show({
									title: '成功撤出书架',
									type: 'success',
									position: 'top'
								})
							}
						}
					} else {
						let bookShelf = uni.getStorageSync("bookShelf");
						let bookList = uni.getStorageSync("bookList");
						let _bookShelf = bookShelf ? JSON.parse(bookShelf) : {};
						let _bookList = bookList ? JSON.parse(bookList) : {
							'type': null,
							'writer': null,
							'is_over': null,
							'image': null,
							'chapterCount': null
						};
						_bookShelf[id] = {
							index: 1,
							lastReadChapter: _bookList[id].first_chapter_id,
							id: _bookList[id].id,
							chapterCount: _bookList[id].chapterCount,
							chapter_id: _bookList[id].first_chapter_id,
							name: _bookList[id].name,
							type: _bookList[id].type,
							writer: _bookList[id].writer,
							is_over: _bookList[id].is_over,
							image: _bookList[id].image,

						};
						uni.setStorageSync("bookShelf", JSON.stringify(_bookShelf));
						this.addFlag = true;
						this.$refs.uToast.show({
							title: '成功加入书架',
							type: 'success',
							position: 'top'
						})
					}
				}
			}
		},
	};
</script>

<style scoped>
	.detail-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.detail-img {
		height: 200rpx;
		width: 150rpx;
		border-radius: 12rpx;
		background-repeat: no-repeat;
		background-size: 200rpx 150rpx;
		margin-right: 36rpx;
	}

	.detail-info {
		width: 72%;
	}

	.detail-top {
		display: flex;
		justify-content: space-between;
	}

	.detail-title {
		width: 45%;
	}

	.name {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		/* font-weight: bold; */
		color: rgba(6, 27, 65, 0.75);
		margin-bottom: 12rpx;
	}

	.writer {
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: rgba(6, 27, 65, 0.35);
		margin-bottom: 30rpx;
	}

	.detail-tag {
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		width: 55%;
	}

	.detail-intro {
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: rgba(6, 27, 65, 0.35);
	}

	.detail-last {
		font-size: 22rpx;
		margin-top: 24rpx;
	}

	.detail-last text:first-child {
		font-weight: 400;
		margin-right: 10rpx;
	}

	.detail-last text:last-child {
		font-weight: 800;
	}

	.u-size-mini {
		margin: 0;
	}

	.add-button {
		display: flex;
		justify-content: flex-end;
	}
</style>
